<template>
  <div class="view">
    <Panel :title="title">
      <div class="courseMain">
        <el-row :gutter="100">
          <el-col :span="16">
            <div class="courseName">
              <span style="color: red">*</span>
              课程名称
            </div>
            <div>
              <el-input v-model="course.name" placeholder="请输入课程名称" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="courseType">
              <span style="color: red">*</span>
              可见状态
            </div>
            <div class="typeSwitch">
              <el-switch v-model="course.visible" />
            </div>
          </el-col>
        </el-row>
        <div class="courseDes">
          <span style="color: red">*</span>
          课程简介
        </div>
        <div>
          <simditor v-model="course.description" />
        </div>
        <div class="courseDes">
          <span style="color: red">*</span>
          教学目标
        </div>
        <div>
          <simditor v-model="course.goal" />
        </div>
        <div class="courseDes">
          <span style="color: red">*</span>
          内容概括
        </div>
        <div>
          <simditor v-model="course.content" />
        </div>
        <div class="courseDes">
          <span style="color: red">*</span>
          参考资源
        </div>
        <div>
          <simditor v-model="course.references" />
        </div>
        <div class="courseButton">
          <save type="primary" @click="saveCourse()">保存</save>
        </div>
      </div>
    </Panel>
  </div>
</template>

<script>
import api from '../../api.js'
// Simditor是写好的编辑栏组件，我们可以直接引入使用
import Simditor from '../../components/Simditor.vue'

export default {
  name: 'CreateCourse',
  components: { Simditor },
  data () {
    return {
      title: '添加课程',
      course: {
        name: '',
        description: '',
        goal: '',
        content: '',
        references: '',
        visible: false
      }
    }
  },
  mounted () {
    if (this.$route.name === 'edit-course') {
      this.title = '编辑课程'
      api.getCourse(this.$route.params.courseId).then(res => {
        this.course = res.data.data
      }).catch(() => {
      })
    }
  },
  methods: {
    saveCourse () {
  //   let funcName = this.$route.name === 'edit-course' ? 'editCourse' : 'createCourse'
      let data = Object.assign({}, this.course)
      //   api[funcName](data).then(res => {
      //     this.$router.push({ name: 'course-list', query: { refresh: 'true' } })
      //   }).catch((e) => {
      //   })
      console.log(data)
    }
  }
}
</script>
<style scoped>
.courseMain {
  width: 80%;
  margin-left: 10%;
}
.courseName {
  margin-bottom: 15px;
}
.courseType {
  margin-bottom: 15px;
}
.typeSwitch {
  margin-top: 20px;
}
.courseDes {
  margin-top: 30px;
  margin-bottom: 10px;
}
.courseButton {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
